<template>
  <div class="container">
    <div class="statisticsTitleSty">违法记载</div>
    <div class="recordsBox">
      <div id="records" class="chartbg"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'illegalRecords',
  data() {
    return {
      recordsData: {
        total: '',
        scale: '',
        success: '',
      }, //违法记载
      isWidth: true,
      recordsChart: '',
    }
  },
  created() {},
  mounted() {
    const windowWidth = window.screen.width
    const windowHeight = window.screen.height
    if (windowWidth <= 1600) {
      this.isWidth = false
    }
    if (windowWidth <= 1366 && windowHeight <= 864) {
      this.isLow = true
    }
    this.getRealRecordsData(this.area)
  },
  props: {
    area: {
      type: String,
      default: '',
    },
  },
  watch: {
    area(val) {
      this.getRealRecordsData(val)
    },
  },
  activated() {
    // 解决其他页面浏览器放大缩小，切换到本页面echarts不显示的问题
    if (this.recordsChart) {
      setTimeout(() => {
        this.recordsChart.resize()
      }, 100)
    }
  },
  methods: {
    getRealRecordsData(areaId) {
      return this.axios({
        method: 'post',
        url: '/api-r/rightsdispute/expand/alertrightsrecord',
        data: {
          areaId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            this.recordsData.data = response.data.result
            this.drawRecords('records', this.recordsData.data)
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    drawRecords(id, recordsData) {
      let topPos = null
      topPos = '50%'
      let labelStr = `{a|{b}\n}{b|}\n{c|{d}%}  {a|{c}个}`
      let autoWidth = 100
      let size = 12
      if (!this.isWidth) {
        topPos = '56%'
        size = 10
      }

      this.recordsChart = echarts.init(document.getElementById(id))
      this.recordsChart.setOption({
        color: ['#26BBFF', '#FBF592', '#F44153'],
        legend: {
          data: [
            {
              name: '一般',
              textStyle: {
                color: '#26BBFF',
              },
            },
            {
              name: '严重',
              textStyle: {
                color: '#FBF592',
              },
            },
            {
              name: '重大',
              textStyle: {
                color: '#F44153',
              },
            },
          ],
          bottom: 5,
          // right: 15,
          itemWidth: 10,
          itemHeight: 10,
        },
        tooltip: {
          trigger: 'item', //饼图悬浮提示
        },
        series: [
          {
            name: '违法记载',
            type: 'pie',
            radius: ['30%', '40%'],
            center: ['50%', topPos],
            label: {
              normal: {
                show: true,
                position: 'outside',
                rich: {
                  a: {
                    color: '#b8e8fa',
                    lineHeight: 17,
                    align: 'left',
                    fontSize: size,
                  },
                  b: {
                    backgroundColor: '#52FFAC',
                    width: autoWidth,
                    height: 2,
                  },
                  c: {
                    color: '#FED857',
                    lineHeight: 17,
                    align: 'left',
                    fontSize: size,
                  },
                },
                formatter: labelStr,
              },
            },
            labelLine: {
              show: true,
            },
            emphasis: {
              radius: ['30%', '45%'],
              label: {
                show: true,
                fontWeight: 'bold',
              },
            },
            data: recordsData,
          },
        ],
      })
      setTimeout(() => {
        window.addEventListener('resize', () => {
          this.recordsChart.resize()
        })
      }, 200)
      this.recordsChart.on('click', (params) => {
        if (this.accessControl('/home/events/superviseEvent') == -1) {
          this.goNoAccessPage()
        } else {
          if (params.value > 0) {
            var disputeRank
            if (params.name == '一般') {
              disputeRank = '01'
            } else if (params.name == '严重') {
              disputeRank = '05'
            } else if (params.name == '重大') {
              disputeRank = '10'
            }
            this.$router.push({
              path: '/home/events/superviseEvent',
              name: 'superviseEvent',
              query: {
                disputeRank: disputeRank,
              },
            })
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/events/superviseEvent',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            return
          }
        }
      })
    },
    resizeEchart() {
      this.recordsChart.resize()
    },
  },
}
</script>

<style scoped lang="less">
.container {
  height: 100%;
  .statisticsTitleSty {
    height: 30px;
    // border:1px solid #ccc;
    line-height: 30px;
    padding-left: 12px;
    font-weight: 500;
    color: #5bfcf4;
    font-size: 16px;
    background: url('../../assets/titleBox.png') center center no-repeat;
    background-size: cover;
  }
  .recordsBox {
    height: calc(100% - 30px);
  }
  .chartbg {
    height: 100%;
    // overflow: hidden;
  }
}
</style>
